﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script type="text/javascript">

        var t = n = 0, count;
        $(document).ready(function() {
            count = $("#banner-list a").length;
            $("#banner-list a:not(:first-child)").hide();
            $("#banner-info").html($("#banner-list a:first-child").find("img").attr('alt'));
            $("#banner-info").click(function() { window.open($("#banner-list a:first-child").attr('href'), "_blank") });
            $("#banner li").click(function() {
                var i = $(this).text() - 1;
                n = i;
                if (i >= count) return;
                $("#banner-info").html($("#banner-list a").eq(i).find("img").attr('alt'));
                $("#banner-info").unbind().click(function() { window.open($("#banner-list a").eq(i).attr('href'), "_blank") })
                $("#banner-list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                document.getElementById("banner").style.background = "";
                $(this).toggleClass("on");
                $(this).siblings().removeAttr("class");
            });
            t = setInterval("showAuto()", 4000);
            $("#banner").hover(function() { clearInterval(t) }, function() { t = setInterval("showAuto()", 4000); });
        });

        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $("#banner li").eq(n).trigger('click');
        }
    </script>

</head>
<body>
<div id="banner">	
	<div id="banner-bg"></div>
	<div id="banner-info"></div>
    <ul>
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
   <div id="banner-list">
        <a href="#" target="_blank"><img src="images/Viewer/1.jpg" title="picture1" alt="picture1 title" /></a>
        <a href="#" target="_blank"><img src="images/Viewer/2.jpg" title="picture2" alt="picture2 title" /></a>
        <a href="#" target="_blank"><img src="images/Viewer/3.jpg" title="picture3" alt="picture3 title" /></a>
        <a href="#" target="_blank"><img src="images/Viewer/4.jpg" title="picture4" alt="picture4 title" /></a>
        <a href="#" target="_blank"><img src="images/Viewer/5.jpg" title="picture5" alt="picture5 title" /></a>
	</div>
</div>
</body>
</html>
